import * as React from 'react';
import Box from '@/commonComponents/box/index';
import './index.module.scss';
const { memo } = React;

interface MenuIntemProps {
  title: string;
  value: string | number;
  active: boolean;
  onPress?: (value: string | number) => void;
}
const MenuItem = memo(function MenuItem(props: MenuIntemProps) {
  const { onPress, title, value, active } = props;
  return (
    <li
      styleName={active ? 'active' : ''}
      onClick={() => {
        onPress && onPress(value);
      }}
    >
      {title}1111
    </li>
  );
});

interface OptionProps {
  title: string;
  value: string | number;
  active: boolean;
}
interface MenuProps {
  data?: number[];
  isLoading?: boolean;
  show: boolean;
  options?: OptionProps[];
  onPress?: (value: string | number) => void;
  hideMenu: (value: boolean) => void;
}

const options = [
  {
    title: '男',
    value: '0',
    active: true,
  },
  {
    title: '女',
    value: '1',
    active: false,
  },
];
function Menu(props: MenuProps) {
  // const { data } = props;
  const { show, onPress, hideMenu } = props;
  return (
    <Box data={[1]} isLoading={false} styleName="menu-box">
      {show && (
        <div styleName="menu-mask" onClick={() => hideMenu(!show)}></div>
      )}
      <div styleName={show ? 'menu show' : 'menu'}>
        <div styleName="menu-title"></div>
        <ul>
          {options &&
            options.map((option) => {
              return (
                <MenuItem
                  key={option.value}
                  title={option.title}
                  active={option.active}
                  value={option.value}
                  onPress={onPress}
                ></MenuItem>
              );
            })}
        </ul>
      </div>
    </Box>
  );
}

export default memo(Menu);
